.available-on{

    // ============================================================================
    //   Variables
    // ============================================================================

    $available-on-default-theme-color: $color-martinique;
    $available-on-label-spacing-right: 7px;
    $available-on-icon-size: 18px;

    // properties IN
    $ttip-height-duration-in:                1ms;
    $ttip-height-delay-in:                   1ms;
    $ttip-height-easing-in:                  linear;

    $ttip-transform-duration-in:             250ms;
    $ttip-transform-delay-in:                250ms;
    $ttip-transform-easing-in:               $bezier-medium-elastic;

    $ttip-opacity-duration-in:               $ttip-transform-duration-in;
    $ttip-opacity-delay-in:                  $ttip-transform-delay-in;
    $ttip-opacity-easing-in:                 $ttip-transform-easing-in;

    // properties OUT
    $ttip-transform-duration-out:            250ms;
    $ttip-transform-delay-out:               100ms;
    $ttip-transform-easing-out:              $bezier-medium-elastic;

    $ttip-opacity-duration-out:              $ttip-transform-duration-out;
    $ttip-opacity-delay-out:                 $ttip-transform-delay-out;
    $ttip-opacity-easing-out:                $ttip-transform-easing-out;

    $ttip-height-duration-out:               1ms;
    $ttip-height-delay-out:                  ( $ttip-opacity-duration-out + $ttip-opacity-delay-out );
    $ttip-height-easing-out:                 linear;

    // ============================================================================
    //   Single
    // ============================================================================

    @include clearfix();
    display:block;
    margin: 1em auto;
    opacity:0;
    transition: all 300ms ease;

    // ============================================================================
    //   Child Elements
    // ============================================================================

    &__label{
      text-align: left;
      margin-bottom: 0.3em;
      display: block;
      padding: 3px $available-on-label-spacing-right 3px 0;
      font-family: $font-din;
      text-transform: uppercase;
      font-size: 1.2rem;
      color: $available-on-default-theme-color;
      letter-spacing: 0.2rem;
    }

    &__entry{
      float:left;
      display: block;
      position:relative;
      padding: 5px 10px; // larger hitbox on mobile

      svg{
        display: block;
        fill: $available-on-default-theme-color;
        width: $available-on-icon-size;
        height:$available-on-icon-size;
      }
    }

    &__tooltip{
      z-index: 5;
      position:absolute;
      top: 100%;
      left: 50%;

      display: inline-block;
      height: 0;
      overflow: hidden;
      color:white;
      font-size: 1.2rem;
      padding: 0 11px;
      line-height: 34px;

      backface-visibility: hidden;

      //animated properties
      opacity: 0;
      transform: translate(-50%, 10px);
      transition: transform $ttip-transform-duration-out $ttip-transform-easing-out $ttip-transform-delay-out,
                  opacity $ttip-opacity-duration-out $ttip-opacity-easing-out $ttip-opacity-delay-out,
                  height $ttip-height-duration-out $ttip-height-easing-out $ttip-height-delay-out;

      &:before{
        content:"";
        position: absolute;
        border-radius: 4px;
        top:14px; bottom:0;
        left:0; right:0;
        background-color: $color-martinique;
      }

      &:after{
          position: absolute;
          top:0; left:50%;
          margin-left: -7px;
          @include triangle(top, $color-martinique, 14px);
      }

      span{
        position: relative;
        display: block;
        padding-top: 14px;
        white-space: nowrap;
      }

    }

    // ============================================================================
    //   States
    // ============================================================================

    &.load-reveal{
      opacity:1;
    }

    html.no-touch & .available-on__entry:hover{
      .available-on__tooltip{
        height: 48px;
        overflow: visible;
        opacity: 1;
        transform: translate(-50%, 0);
        transition: transform $ttip-transform-duration-in $ttip-transform-easing-in $ttip-transform-delay-in,
                opacity $ttip-opacity-duration-in $ttip-opacity-easing-in $ttip-opacity-delay-in,
                height $ttip-height-duration-in $ttip-height-easing-in $ttip-height-delay-in;
      }
    }

    // ============================================================================
    //   Media Queries
    // ============================================================================

    @include break-min($break-tablet){
      &__entry{
        padding: 1px 4px 2px;
      }
      &__label{
        float: left;
        margin-bottom: 0;
      }
    }

    // ============================================================================
    //   Modifiers
    // ============================================================================

    &--green{
      .available-on__label{
        color: $color-carib-green;
      }
      .available-on__entry{
        svg{ fill: $color-carib-green; }
      }
      .available-on__tooltip{
        &:after{ border-bottom-color: $color-carib-green; }
        &:before{ background-color: $color-carib-green; }
      }
    }

    &--red{
      .available-on__label{
        color: $color-rad-red;
      }
      .available-on__entry{
        svg{ fill: $color-rad-red; }
      }
      .available-on__tooltip{
        &:after{ border-bottom-color: $color-rad-red; }
        &:before{ background-color: $color-rad-red; }
      }
    }

    &--blue{
      .available-on__label{
        color: $color-parse-blue;
      }
      .available-on__entry{
        svg{ fill: $color-parse-blue; }
      }
      .available-on__tooltip{
        &:after{ border-bottom-color: $color-parse-blue; }
        &:before{ background-color: $color-parse-blue; }
      }
    }

}
